import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Card } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;

@connect(({ loading, user }) => ({
  userData: user.currentUser,
  submitting: loading.effects['user/updatePassword'],
}))
@Form.create()
export default class EditPassWord extends PureComponent {
  checkConfirm = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('newPassWord')) {
      callback('两次输入的密码不匹配!');
    } else {
      callback();
    }
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'user/updatePassword',
          payload: {
            sno: values.sno,
            tno: values.tno,
            password: values.password,
          },
        });
      }
    });
  };
  render() {
    const { submitting, userData } = this.props;
    const { getFieldDecorator } = this.props.form;
    const role = localStorage.getItem('role');
    const formItemLayout = {
      labelCol: {
        xs: { span: 20 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 10 },
        md: { span: 8 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 20, offset: 0 },
        sm: { span: 8, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout title="修改密码">
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            {role === 'student' ? (
              <FormItem {...formItemLayout} label="学号">
                {getFieldDecorator('sno', {
                  initialValue: userData.sno,
                  rules: [
                    {
                      required: true,
                      message: '请输入学号',
                    },
                  ],
                })(<Input placeholder="学号" disabled />)}
              </FormItem>
            ) : (
              <FormItem {...formItemLayout} label="工号">
                {getFieldDecorator('tno', {
                  initialValue: userData.tno,
                  rules: [
                    {
                      required: true,
                      message: '请输入工号',
                    },
                  ],
                })(<Input placeholder="工号" disabled />)}
              </FormItem>
            )}
            <FormItem {...formItemLayout} label="新密码">
              {getFieldDecorator('newPassWord', {
                rules: [
                  {
                    required: true,
                    message: '请输入修改后的密码',
                  },
                ],
              })(<Input type="password" placeholder="新密码" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="确认密码">
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请输入再次确认密码',
                  },
                  {
                    validator: this.checkConfirm,
                  },
                ],
              })(<Input type="password" placeholder="确认密码" />)}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32, textAlign: 'center' }}>
              <Button type="primary" size="large" htmlType="submit" loading={submitting}>
                确认修改
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
